<script setup>
import { ref,onMounted, nextTick, computed } from 'vue'
import { ElCard, ElTable, ElTableColumn, ElMessage,ElTag } from 'element-plus'
import {getAssetListPage} from "@/api/AssetApi"


const props = defineProps({
    status:{
        type:[String,Number],
        required:true,
        default:''
    }
})

const emit = defineEmits(['assetSelect'])


// 资产列表总数
const total = ref(0)

// 资产列表数据
const assetList = ref([])

// 资产列表搜索框绑定的资产名称
const queryAssetForm = ref({
  pageNum: 1,
  pageSize: 5,
  status:props.status,
  name: ''
})

// 表格 ref
const tableRef = ref(null)

// 取消选中的方法
const clearSelection = () => {
  tableRef.value?.clearSelection()
  // 注意：使用 reserve-selection 后，clearSelection 不会清除保留的选中项
  // 需要手动清除
  tableRef.value?.clearSelection()
}

// 获取资产列表
const getAssetListData = () => {
  getAssetListPage(queryAssetForm.value).then(res => {
    if (res.code === 200) {
      assetList.value = res.data.list
      total.value = res.data.total
    }
  })
}

// 按资源名称搜索的方法
const handleSearch = () => {
  // 判断是否为空
  if (!queryAssetForm.value.name) {
    ElMessage.warning('请输入资产名称');
    return;
  }
  getAssetListData()
}

// 重置搜索条件
const handleReset = () => {
  queryAssetForm.value.name = ''
  queryAssetForm.value.pageNum = 1
  queryAssetForm.value.pageSize = 5
  getAssetListData()
}


// 选择的资源列表
const multipleSelection = ref([])

// 当选择资源时
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  //获取选中的资源列表 传递给父组件
  emit('assetSelect', val)
}

// 暴露 clearSelection 方法
defineExpose({
  clearSelection
})

onMounted(() => {
  getAssetListData()
})
</script>


<template>
    <div>
        <el-form :inline="true" :model="queryAssetForm" class="demo-form-inline" style="margin-top: 10px;margin-left: 50px;">
        <el-form-item label="资产名称">
            <el-input v-model="queryAssetForm.name" placeholder="请输入资产名称" clearable style="width: 205px"/>
        </el-form-item>
        <el-form-item label="已选资产">
          {{ multipleSelection.length }}
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><el-icon-search /></el-icon> 搜索
            </el-button>
            <el-button  @click="handleReset">
              <el-icon><el-icon-refresh /></el-icon> 重置
            </el-button>
        </el-form-item>
        </el-form>

        <el-table :data="assetList" ref="tableRef" height="385px" @selection-change="handleSelectionChange" row-key="id">
        <!-- 使用 reserve-selection 属性保持跨分页选中状态 -->
        <el-table-column type="selection" width="50" fixed reserve-selection/>
        <el-table-column prop="assetsPic" label="资产照片" align="center">
            <template #default="scope">
            <el-image :lazy="true" :src="'/api/'+scope.row.pic" :preview-src-list="[scope.row.pic]" :z-index="99999999" :preview-teleported="true" style="width: 50px;height:50px;"></el-image>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="资产名称" align="center"/>
        <el-table-column prop="categoryName" label="资产分类" align="center"/>
        <el-table-column prop="assetCode" label="资产编号" align="center"/>
        <el-table-column prop="model" label="型号" align="center"/>
        <el-table-column prop="deptName" label="所在部门" align="center"/>
        <el-table-column prop="locationName" label="位置名称" align="center"/>
        </el-table>
        
        <!-------------- 分页 -------------------->
        <el-pagination
            v-show="total > 0"
            :total="total"
            v-model:current-page="queryAssetForm.pageNum"
            v-model:page-size="queryAssetForm.pageSize"
            @current-change="getAssetListData"
            class="pagination"
            layout=" total,prev, pager, next,"
        />

    </div>
</template>


<style scoped lang="less">
    .pagination {
        box-sizing: border-box;
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }
</style>